<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>图表统计</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="{{ url_for('static',filename='layuimini/lib/layui-v2.6.3/css/layui.css') }}" media="all">
    <link rel="stylesheet" href="{{ url_for('static',filename='layuimini/lib/font-awesome-4.7.0/css/font-awesome.min.css') }}" media="all">
    <link rel="stylesheet" href="{{ url_for('static',filename='layuimini/css/public.css') }}" media="all">
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<style>
    body{
        margin: 0;
    }
    .layuimini-tab .layui-tab-content{
        padding: 0 !important;
    }
    #main{
        background-color: white;
        width: 100%;
        height: 613px;
    }
</style>
<body>
<div id="main">
    <div style="display: flex">
        <div id="chart2" style="width: 450px; height: 300px;"></div>
        <div id="chart1" style="width: 450px; height: 300px;"></div>
        <div id="chart6" style="width: 450px; height: 300px;"></div>
    </div>
    <div style="display: flex">
        <div id="chart3" style="width: 450px; height: 300px;"></div>
        <div id="chart4" style="width: 450px; height: 300px;"></div>
        <div id="chart5" style="width: 450px; height: 300px;"></div>
    </div>
    <script>
        //订单数折线图
        var chart1 = echarts.init(document.getElementById('chart1'));
        var option1 = {
            title: {
                text: '订单数量',
                left: 'center'
            },
            tooltip: {},
            xAxis: {
                data: ['5.3', '5.13', '5.19', '5.23', '5.30', '6.10', '6.20']
            },
            yAxis: {},
            series: [{
                name: '订单数',
                type: 'line',
                smooth:true,
                data: [20, 15, 22, 40, 42, 35, 50]
            }]
        };
        chart1.setOption(option1);

        // 销量条形图
        var chart2 = echarts.init(document.getElementById('chart2'));
        var option2 = {
            title: {
                text: '图书销量',
                left: 'center'
            },
            tooltip: {},
            xAxis: {

            },
            yAxis: {
                data: ['文学', '历史', '科幻经典', '专业书']
            },
            series: [{
                name: '销量',
                type: 'bar',
                smooth:true,
                data: [120,80,180,200],
                coordinateSystem: 'cartesian2d'
            }]
        };
        chart2.setOption(option2);

        // 图书饼图
        var chart3 = echarts.init(document.getElementById('chart3'));
        var option3 = {
            title: {
                text: '图书种类数量',
                left: 'center'
            },
            tooltip: {},
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['文学', '历史', '科幻经典', '专业书']
            },
            series: [
                {
                    name: '种类',
                    type: 'pie',
                    radius: '50%',
                    center: ['50%', '60%'],
                    data: [
                        {value: {{ count[0] }}, name: '文学'},
                        {value: {{ count[1] }}, name: '历史'},
                        {value: {{ count[2] }}, name: '科幻经典'},
                        {value: {{ count[3] }}, name: '专业书'},
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        chart3.setOption(option3);

       // 图书柱状图
        var chart4 = echarts.init(document.getElementById('chart4'));
        var option4 = {
            tooltip: {},
            xAxis: {
                data: ['文学', '历史', '科幻经典', '专业书']
            },
            yAxis: {},
            series: [{
                name: '种类',
                type: 'bar',
                data: [{{ count[0] }},{{ count[1] }},{{ count[2] }},{{ count[3] }}]
            }]
        };
        chart4.setOption(option4);

        //用户折线
        var chart5 = echarts.init(document.getElementById('chart5'));
        var option5 = {
            title: {
                text: '用户数量',
                left: 'center'
            },
            tooltip: {},
            xAxis: {
                data: ['5.1', '5.8', '5.15', '5.22', '5.29', '6.5', '6.12']
            },
            yAxis: {},
            series: [{
                name: '用户数',
                type: 'line',
                smooth:true,
                data: [30, 25, 35, 40, 42, 35, 28]
            }]
        };
        chart5.setOption(option5);

        // 图书热销柱状图
        var chart6 = echarts.init(document.getElementById('chart6'));
        var option6 = {
            title: {
                text: '图书热销榜',
                left: 'center'
            },
            tooltip: {},
            xAxis: {
                data: ['活着','南京大屠杀','老人与海','三体','海伯利安','长安十二时辰','明朝那些事','孙子兵法','Vue设计与实现','Spring实战'],
                axisLabel: {
                    rotate: 45, // 将标签文字旋转45度
                    fontSize: 10 // 将标签文字的字体大小设置为12
                },
            },
            yAxis: {},
            series: [{
                name: '图书',
                type: 'bar',
                data: [50,65,42,59,53,70,80,100,90,85],
                itemStyle: { //点击高亮显示
                    emphasis: {
                        color: '#37a2da'
                    }
                }
            }]
        };
        chart6.setOption(option6);
    </script>
</div>
<script src="{{ url_for('static',filename='layuimini/lib/layui-v2.6.3/layui.js') }}" charset="utf-8"></script>
</body>
</html>